<template>
    <div :class="['next', { nextTo: extArr.indexOf(item.id) != -1 }]" :id="item.id" v-for="item in data" :key="item.id">
        <!--  -->
        <img
            :id="item.id"
            :class="item.next ? ['img', { imgTo: extArr.indexOf(item.id) != -1 }] : 'img'"
            @click="isExt(item.id)"
            :src="item.next ? 'https://cfan.cc/tc/static/img/tree.png' : 'https://cfan.cc/tc/static/img/file.png'"
        />
        <!--  -->
        <span class="title" @click="isExt(item.id)">{{ item.title }}</span>
        <!--  -->
        <TreeItem :data="item.next"></TreeItem>
    </div>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";

export default defineComponent({
    name: "TreeItem",
    props: {
        data: Array,
    },
    setup() {
        let extArr = reactive([]);
        const isExt = (id: string): void => {
            console.log(id);
            let index = extArr.indexOf(id);
            if (index == -1) {
                extArr.push(id);
            } else {
                extArr.splice(index, 1);
            }
            console.log(extArr);
        };
        return {
            isExt,
            extArr,
        };
    },
});
</script>

<style scoped>
.title {
    cursor: pointer;
    display: inline-block;
}
.img {
    cursor: pointer;
    vertical-align: middle;
    width: 20px;
    height: 20px;
}
.imgTo {
    width: 20px;
    height: 20px;
    transform: rotate(90deg);
}
.next {
    height: 24px;
    overflow: hidden;
    margin-left: 50px;
}
.nextTo {
    margin-left: 50px;
    height: auto;
}
</style>
